import { Avatar, Icon, Menu, Spin } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import React from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';

class AvatarDropdown extends React.Component {
  onMenuClick = event => {
    const { key } = event;

    if (key === 'logout') {
      const { dispatch } = this.props;

      if (dispatch) {
        dispatch({
          type: 'login/logout',
        });
      }

      return;
    } else if (key === 'layerSetting') {
      router.push(`/${key}`);
      return;
    }

    router.push(`/account/${key}`);
  };

  render() {
    const {
      currentUser = {
        avatar: '',
        name: '',
      },
      menu,
    } = this.props;
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {menu && (
          <Menu.Item key="center">
            <Icon type="user" />
            <FormattedMessage id="menu.account.center" defaultMessage="account center" />
          </Menu.Item>
        )}
        {menu && (
          <Menu.Item key="settings">
            <Icon type="setting" />
            <FormattedMessage id="menu.account.settings" defaultMessage="account settings" />
          </Menu.Item>
        )}
        {menu && <Menu.Divider />}

        <Menu.Item key="layerSetting">
          <Icon type="setting" />
          <FormattedMessage id="menu.layerSetting" defaultMessage="layer setting" />
        </Menu.Item>
        <Menu.Item key="logout">
          <Icon type="logout" />
          <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
        </Menu.Item>
      </Menu>
    );
    return currentUser && currentUser.name ? (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <span className={styles.avatar}>
            <svg style={{width: '30px', height: '30px', verticalAlign: 'super'}} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs></defs><title>头像</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path style={{fill:'#fff'}} class="cls-1" d="M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm0,1.64A10.36,10.36,0,0,1,22.36,12a10.19,10.19,0,0,1-1.64,5.56A11.67,11.67,0,0,0,14.12,14a4.9,4.9,0,1,0-7-4.4A4.78,4.78,0,0,0,9.88,14a12,12,0,0,0-6.6,3.6A10.23,10.23,0,0,1,1.64,12,10.36,10.36,0,0,1,12,1.64Z"/></g></g></svg>
          </span>
          {/* <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" /> */}
          <span className={styles.name}>{currentUser.name}</span>
        </span>
      </HeaderDropdown>
    ) : (
      <Spin
        size="small"
        style={{
          marginLeft: 8,
          marginRight: 8,
        }}
      />
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(AvatarDropdown);
